.container {
  position: relative;
  display: inline-block;
}

.avatar {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 50%;
}
// .mask {
//   position: absolute;
//   top: 0;
//   left: 0;
//   z-index: 2;
//   width: 100%;
//   height: 100%;
//   background-color: rgba(0, 0, 0, 0.5);
//   border-radius: 50%;
//   opacity: 0;
//   transition: opacity 0.2s ease-in-out;
// }

// .container:hover .mask {
//   opacity: 1;
// }

.button {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: white;
  position: absolute;
	bottom: 35px;
	right: -10px;
  // top: 50%;
  // left: 50%;
  z-index: 3;
	border-inline: 2px white;
  // transform: translate(-50%, -50%);
  // opacity: 0;
  // transition: opacity 0.2s ease-in-out;
}

// .container:hover .button {
//   opacity: 1;
// }
